<template>
	<view style="color: #fff;">
		<uni-popup ref="popup" type="top">
			<view class="flex flex-column" style="height: 100vh;">
				<view v-if="type==1||type==3" @click="closePopup" class="">
					<view class="status_bar">

					</view>
					<view class="nav_bar">
					</view>
					<view class="py-3">
						<view class="" style="height:34rpx;">

						</view>
					</view>
				</view>
				<view v-if="type==2" @click="closePopup" class="">
					<view class="status_bar">

					</view>
					<view class="" style="height: 290rpx;">

					</view>
				</view>
				<view class="popupWrap flex-1 A-Medium" style="overflow-y: scroll;"
					:class="model=='light'?'popupWrapLight':''">
					<view v-if="type==1||type==2" @click="confirm(item)" v-for="(item,index) in list" class="list mx-3 py-3"
						:class="model=='light'?'listLight':''">
						{{item.title}}
					</view>
					<view v-if="type==3" @click="confirm(item)" v-for="(item,index) in list" class="list mx-3 py-3"
						:class="model=='light'?'listLight':''">
						{{item.title=='全部'?item.title:item.title.replace('USDT','').replace('USD','')+'-USDT'}}
					</view>
					<view class="" style="height: 68rpx;">

					</view>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import {
		getCoinTypeList,
		newOptionsCoinType
	} from '@/core/api/index.js';
	export default {
		name: "bzPoup",
		props: {
			type: {
				type: Number,
				default: 1, //1 币种  2行情首页弹窗 3期权币种
			}
		},
		created() {
			if (this.type == 1) {
				getCoinTypeList({
					hasAll: 1
				}).then(res => {
					let list = res.result;
					this.list = list;
				})
			}
			if (this.type == 2) {
				this.list = [
					// {
					// 	id:1,
					// 	title:'1m'
					// },{
					// 	id:2,
					// 	title:'3m'
					// },
					{
						id: 3,
						title: '5m'
					}
					// ,{
					// 	id:4,
					// 	title:'15m'
					// },{
					// 	id:5,
					// 	title:'30m'
					// },{
					// 	id:6,
					// 	title:'1h'
					// },{
					// 	id:7,
					// 	title:'4h'
					// }
					// // ,{
					// // 	id:8,
					// // 	title:'6h'
					// // }
					// // ,{
					// // 	id:9,
					// // 	title:'8h'
					// // }
					// ,{
					// 	id:10,
					// 	title:'12h'
					// },{
					// 	id:11,
					// 	title:'1w'
					// }
					// ,{
					// 	id:12,
					// 	title:'1w'
					// },
				]
			}
			if (this.type == 3) {
				newOptionsCoinType().then(res => {
					let list = res.result;
					this.list = [{
						"value": "",
						"title": "全部"
					}] 
					this.list.push(...list);
				})
			}
		},
		data() {
			return {
				list: []
			};
		},
		computed: {
			i18n() {
				return this.$t('component');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		methods: {
			open() {
				this.$refs.popup.open('top');
			},
			confirm(e) {
				this.$emit('confirm', e);
				this.closePopup();
			},
			closePopup() {
				this.$refs.popup.close();
			},
		}
	}
</script>

<style scoped lang="scss">
	.popupWrap {
		background: #0E0F11;
		font-size: 32rpx;
		color: #F7F7F7;

		.titleWrap {
			margin-bottom: 6rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.list {
			border-bottom: 2rpx solid #1F2128;
		}

		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}

	.popupWrapLight {
		background: #ffffff;
		color: #0E0F11;
	}
</style>